<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件绑定</title>
	</head>
	<body>
		<div id="app">
			<!-- 事件的绑定 v-on 
			     1.直接编辑操作内-->


			数值：{{num}}
			<button v-on:click="num++">数字加1</button>

			<!-- 2.v-on的简化操作 -->
			<button @click="num++">数字加1</button>

			<!-- 3.通过方法实现新增 -->
			<button @click="add()">点击</button>

		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script type="text/javascript">
			const app = new Vue({

				el: '#app',
				data: {
					msg: '双向数据的绑定',
					num: 1
				},
				// 定义vue对象的方法
				methods: {

					// 以前的写法
					/* addNum: function(){
						alert("测试方法是否有效")
					} 
					 */
					//主流写法
					add() {
						//alert("造作")
						this.num++
					}

				}

			})
		</script>
	</body>
</html>
